import React, { Component } from "react";
import { Card, Button, notification } from "antd";

const openNotificationWithIcon = type => {
  notification[type]({
    message: "Notification Title",
    description:
      "This is the content of the notification. This is the content of the notification. This is the content of the notification."
  });
};
const openNotification = () => {
  notification.open({
    message: "Notification Title",
    description:
      "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
    onClick: () => {
      console.log("Notification Clicked!");
    }
  });
};
export default class Notification extends Component {
  render() {
    return (
      <div>
        <Card title="带图标的消息提醒">
          <div>
            <Button onClick={() => openNotificationWithIcon("success")}>
              Success
            </Button>
            <Button onClick={() => openNotificationWithIcon("info")}>
              Info
            </Button>
            <Button onClick={() => openNotificationWithIcon("warning")}>
              Warning
            </Button>
            <Button onClick={() => openNotificationWithIcon("error")}>
              Error
            </Button>
          </div>
        </Card>
        <Card title="基本提醒">
          <Button type="primary" onClick={openNotification}>
            Open the notification box
          </Button>
        </Card>
      </div>
    );
  }
}
